<template>
  <!-- 商品详细数据 :
 解决bug： Error in render: "TypeError: Cannot read property '0' of undefined" 
 加上  v-if="Object.keys(goodsDetail).length !== 0" 
  -->
  <div v-if="Object.keys(goodsDetail).length !== 0" class="goods-detail">
    <div class="goods-desc clear-fix">
      <div class="start"></div>
      <div class="desc">{{ goodsDetail.desc }}</div>
      <div class="end"></div>
    </div>
    <div class="goods-key">{{ goodsDetail.detailImage[0].key }}</div>
    <div class="goods-list">
      <img v-for="item in goodsDetail.detailImage[0].list" :key="item" :src="item" @load="imgLoad" />
    </div>
  </div>
</template>

<script>
export default {
  name: "goodsDetail",
  data() {
    return {
      count: 0, // 图片加载的数量
      imgLength: 0 // 图片的总数量
    };
  },
  props: {
    goodsDetail: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    imgLoad() {
      // 如果图片加载的数量等于图片的总数量，则向外通知better-scroll执行refresh
      if (++this.count === this.imgLength) {
        this.$emit("imageLoad");
      }
    }
  },
  watch: {
    //   监听商品详情数据，获取最新的图片总数量
    goodsDetail() {
      this.imgLength = this.goodsDetail.detailImage[0].list.length;
    }
  }
};
</script>

<style lang="less" scoped>
.goods-detail {
  padding: 20px 0;
  border-bottom: 5px solid #f2f5f8;
  .goods-desc {
    padding: 0 15px;
    .start,
    .end {
      position: relative;
      background-color: #a3a3a5;
      width: 90px;
      height: 1px;
      &::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        background-color: #333;
        bottom: 0;
      }
    }
    .start {
      float: left;
    }
    .end {
      float: right;
      &::before {
        right: 0;
      }
    }
    .desc {
      font-size: 14px;
      padding: 15px 0;
    }
  }
  .goods-key {
    margin: 10px 0 10px 15px;
    color: #333;
    font-size: 15px;
  }
  .goods-list {
    img {
      width: 100%;
    }
  }
}
</style>